<template>
  <div id="about">
    <div class="banner"></div>
    <menuComponent/>
    <transition name="slide-left" mode="out-in">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>
<script>
  import menuComponent from '@/components/about/menu'
  import indexComponent from '@/components/about/index'
  import businessComponent from '@/components/about/business'
  import honorComponent from '@/components/about/honor'
  import cultureComponent from '@/components/about/culture'
  import partnerComponent from '@/components/about/partner'
  import contactComponent from '@/components/about/contact'
  export default{
    data () {
      return {}
    },
    created () {
      if (typeof $.fn.fullpage.destroy === 'function') {
        $.fn.fullpage.destroy('all')
      }
    },
    computed: {},
    methods: {},
    components: {
      menuComponent,
      indexComponent,
      businessComponent,
      honorComponent,
      cultureComponent,
      partnerComponent,
      contactComponent
    }
  }
</script>
<style>
  #about .banner{background: url("../assets/about/banner.jpg") no-repeat center top;  background-attachment: fixed; height: 500px;}
  #about .about-main{max-width: 1200px; margin: 0 auto}
  #about h1{padding: 0 20px; font-weight: normal}
  #about .about-con{position: relative}
  #about .content{padding: 20px; overflow: hidden; border-top: 1px solid #f8f8f8; border-bottom: 1px solid #f8f8f8; position: relative}
</style>
